<template>
	<view>
		<view class="bg-gradual-orange padding">
			<!-- 跳转前一页 -->
			<view style="width: 50upx;margin-right:10upx;" @click="backTo">
				<image src="../../static/icon/left.png" style="width: 35upx; height: 50upx; margin:auto;" class="grayscale"></image>
			</view>
			<view>
				<view v-if="status==0" class="text-center text-xl text-bold"><text class="cuIcon-time margin-right"></text>待付款</view>
				<view v-if="status==1" class="text-center text-xl text-bold"><text class="cuIcon-time margin-right"></text>待评价</view>
				<view v-if="status==2" class="text-center text-xl text-bold"><text class="cuIcon-roundcheck margin-right"></text>已完成</view>
				<view v-if="status==3" class="text-center text-xl text-bold"><text class="cuIcon-warn margin-right"></text>已取消</view>
			</view>
		</view>

		<!-- 地址用户信息 -->
		<view class="bg-white padding-xl">
			<view>
				<text class="cuIcon-location text-xl text-bold">{{orderInfo.order.receiverName}}</text>
				<text class="margin-left">{{orderInfo.order.receiverPhone}}</text>
			</view>
			<view style="margin-top: 20upx; padding-left: 20upx;">
				<view>地址:<text>{{orderInfo.order.receiverDetailAddress}}</text></view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="padding-xl bg-white">
			<view>
				<!-- 订单项 -->
				<view v-for="(items,index) in orderInfo.items" :key="index" class="flex bg-white flex-direction" style="border-top: #D8D8D8 dashed 5upx;">
					<!-- 店铺名称 -->
					<view class="flex align-center bg-white" style="height: 80upx;color: black;">
						<image src="../../static/icon/store.png" style="width: 50upx; height: 50upx; " />老王水果店
					</view>
					<!-- 上部 -->
					<view class="flex" style="height: 300upx;">
						<!-- 图片端 -->
						<view>
							<image mode="widthFix" style="width: 200upx;" :src="items.skuPic"></image>
						</view>
						<!-- 右端 -->
						<view style="width: 550upx;padding-left: 20upx;padding-right: 20upx;">
							<view style="padding: 10upx;">{{items.skuName}}</view>
							<view style="padding: 10upx;" class="flex align-center justify-between ">
								<text>skuId:{{items.skuId}}</text>
							</view>
							<view class="align-center flex justify-between">
								<text style="color: #FF0000;font-size: 110%;">￥{{items.price}}<text style="font-size: 60%;"></text></text>
								<text style="color: gray;font-size: 110%;">数量：{{items.skuQuantity}}<text style="font-size: 60%;"></text></text>
								<!-- <uni-number-box :min="1":max="9" v-model="items.count" :value="items.count" style="margin-right: 20upx; width: 140upx;margin-right: 0upx;"></uni-number-box> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 数据信息结束 -->
		
		<!-- 物流信息 -->
		<view class="bg-white padding-xl margin-top-xl">
			<view class="margin-left "><text class="text-gray">订单编号:</text><text class="margin-left">{{orderInfo.order.orderSn}}</text></view>
			<view class="margin-left margin-top"><text class="text-gray">下单时间:</text><text class="margin-left">{{orderInfo.order.createTime}}</text></view>
			<view class="margin-left margin-top"><text class="text-gray">支付方式:</text><text class="margin-left">payType：{{orderInfo.order.payType}}</text></view>
			<view class="margin-left margin-top"><text class="text-gray">支付时间:</text><text class="margin-left">{{orderInfo.order.paymentTime}}</text></view>
			<view class="margin-left margin-top"><text class="text-gray">配送方式:</text><text class="margin-left">顺丰</text></view>
		</view>

		<!-- 支付信息 -->
		<view class="bg-white padding-xl margin-top-xl">
			<view class="margin-left margin-top flex justify-between">
				<view><text class="text-gray">商品总额:</text></view>
				<view class="text-black"><text class="margin-left ">￥{{orderInfo.order.payAmount}}</text><text>.00</text></view>
				<!-- payAmount应付总额  totalAmount 订单总额-->
			</view>
			<view class="margin-left margin-top flex justify-between">
				<view><text class="text-gray">运费:</text></view>
				<view class="text-black"><text class="margin-left ">￥0.</text><text>00</text></view>
			</view>
			<view class="margin-left margin-top flex justify-between">
				<view><text class="text-gray">优惠:</text></view>
				<view class="text-black"><text class="margin-left">￥4</text><text>.00</text></view>
			</view>
			<view class="margin-left margin-top flex justify-between">
				<view><text class="text-gray">实际金额:</text></view>
				<view style="color: red;">￥<text class="text-xxl">{{orderInfo.order.totalAmount}}</text><text>.00</text></view>
			</view>
		</view>

		<!-- 底部bar -->
		<view style="font-size: 120%;" class="bg-white padding margin-top-xl text-right">
			<view v-if="status==0" class="cu-btn bg-gradual-orange round" style="height: 80upx;width: 200upx;"  @tap="goPay(orderInfo.order.id)">去支付</view>
			<view v-if="status==1" class="cu-btn bg-gradual-orange round" style="height: 80upx;width: 200upx;" @tap="goRate(orderInfo.items[0])">去评价</view>
			<view v-if="status==2||status==3" class="cu-btn bg-gradual-orange round" style="height: 80upx;width: 200upx;" @tap="goBuy(orderInfo.items)">再次购买</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Data: [],
				orderId: undefined,
				status: undefined,
				orderInfo: {
					items:[],
					orderInfo:{},
					order:{}
				},
				userInfo: {}
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.status = options.status
			this.userInfo =JSON.parse(decodeURIComponent(options.userInfo)) 
			console.log('orderId', this.orderId)
			console.log('status', this.status)
			this.getOrderInfo()
		},
		methods: {
			async getOrderInfo() {
				var res = await this.$request({
					url:`cartorder/order/orderItemList/${Number(this.orderId)}`,
					params:{},
					type:"GET"
				})
				if(res.code == 0){
					console.log('items',res.items)
					this.orderInfo = Object.assign({},this.orderInfo,{'items':res.items})
					this.orderInfo = Object.assign({},this.orderInfo,{'order':res.order})
					console.log('orderInfo',this.orderInfo)
				}
			},
			goPay(orderId) {
				console.log('去支付,orderId is', orderId)
				uni.navigateTo({
					url: `pay?orderId=${orderId}`
				})
			},
			goRate(item) {
				console.log('立即评价')
				uni.navigateTo({
					url: `../goods/comment?memberId=${this.userInfo.id}&orderId=${item.orderId}`
				})
			},
			goBuy(orderItem) {
				console.log('再次购买')
				var objList = []
				orderItem.forEach(item => {
					objList.push({
						skuId: item.skuId,
						skuName: item.skuName,
						skuImage: item.skuPic,
						price: item.price,
						count: item.skuQuantity
					})
				})
				uni.navigateTo({
					url: `../../pages/order/orderDetails?orderInfo=${encodeURIComponent(JSON.stringify(objList))}&userInfo=${encodeURIComponent(JSON.stringify(this.userInfo))}`
				})
			},
			backTo() {
				uni.navigateTo({
					url:'./orderCRM?type=2'
				})
			}
		}
	}
</script>

<style>
</style>
